<template>
  <div
    style="
      height: 40%;
      line-height: 50px;
      margin-top: -9px;
      border-bottom: 1px solid #ccc;
      display: flex;
      background-image: linear-gradient(to right, #434343 0%, black 100%);
    "
  >
    <div class="demo-image">
      <el-image style="width: 40px; height: 40px; margin-top: 10px; margin-left: 1%" :src="imag1">
      </el-image>
    </div>
    <div style="margin-left: 20%; background-color: antiquewhite; margin-top: 3%">
      <span style="font-size: medium; margin-left: -90px; font-weight: bold; color: orange"
        >星光电影</span
      >
    </div>
    <div style="font-weight: bold; width: 100%; margin-left: -29%; margin-top: 15%">
      <span style="font-size: 12px; color: white" @click="router.push('/DefaultMobile')">首页</span>
      <span
        style="margin-left: 3%; font-size: 12px; color: white"
        @click="router.push('/movieListMobile')"
        >电影</span
      >
      <span style="font-size: 12px; color: white; margin-left: 3%" @click="router.push('/Buy')"
        >购票</span
      >
      <span style="font-size: 12px; color: white; margin-left: 3%" @click="router.push('/myOrder')"
        >我的观影</span
      >
      <span
        style="font-size: 12px; color: white; margin-left: 3%"
        @click="router.push('/moviePush')"
        >个性化电影推荐</span
      >
    </div>
    <div style="flex: 1"></div>
    <div style="margin-top: 8%; margin-right: 3%; height: 1px" @click="fuc">
      <el-dropdown>
        <span class="el-dropdown-link" style="color: white; width: 80px">
          <el-icon class="el-icon--right">
            <UserFilled />
          </el-icon>
          <span style="font-size: small">{{ user }}</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click.native="toLogin">登录账号</el-dropdown-item>
            <el-dropdown-item @click.native="router.push('/Register')">注册账号</el-dropdown-item>
            <el-dropdown-item @click.native="router.push('/userInfo')">个人信息</el-dropdown-item>
            <el-dropdown-item @click.native="router.push('/updateUser')">修改信息</el-dropdown-item>
            <el-dropdown-item @click.native="quit">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup>
import { onBeforeMount, ref } from 'vue';
import { UserFilled } from '@element-plus/icons-vue';
import router from '../../../router';
const imag1 = require('@/assets/jiangbei2.png');
let user = ref('登录/注册');

const fuc = () => {
  if (user.value === '登录/注册') router.push('/LoginMobile');
  else router.push('/userInfoMobile');
};
const toLogin = () => {
  sessionStorage.clear();
  router.push('/Login');
};
const quit = () => {
  sessionStorage.clear();
  user.value = '登录/注册';
};

onBeforeMount(() => {
  if (JSON.parse(sessionStorage.getItem('username')) !== null) {
    user.value = JSON.parse(sessionStorage.getItem('username'));
  }
});
</script>
<style lang="scss" scoped>
#el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

#el-icon-arrow-down {
  font-size: 12px;
}

#example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
